<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta name="Description" content="页面描述" />
	<meta name="Keywords" content="页面关键字" />
	<meta name="viewport" content="width=640,minimum-scale=0,maximum-scale=4,user-scalable=no">
	<script>
		if (navigator.appVersion.indexOf('Android') != -1) {
			document.addEventListener("DOMContentLoaded", function (e) {
				document.querySelector('body').style.zoom = e.target.activeElement.clientWidth / 640;
			});
		}
	</script>
	<title>享劵详情</title>
	<link href="css/common.css" rel="stylesheet">
</head>
<body>
	<div class="ticket">
		<header class="ticket-header">
			<div class="ticket-number tc">
				<p>享劵总额</p>
				<p class="ticket-number-num">20000</p>
			</div>
			<div class="c">
				<span class="fl">已结算享劵额 : 200000</span>
				<span class="fr">未结算享劵额: 200000</span>
			</div>
		</header>
		<section class="ticket-nav bb m1 c">
			<ul>
				<li class="co1">门店收入</li>
				<li>消费记录</li>
				<li>提现记录</li>
			</ul>
		</section>
		<section class="ticket-cont thism bt" style="display:block;">
			<ul>
			<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">优惠买单</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">用户昵称</p>
						</div>
						<span class="ticket-cont-plus co4 fr">+20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">线上消费</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">用户昵称</p>
						</div>
						<span class="ticket-cont-plus co4 fr">+20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">线上消费</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">用户昵称</p>
						</div>
						<span class="ticket-cont-plus co4 fr">+20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">线上消费</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">用户昵称</p>
						</div>
						<span class="ticket-cont-plus co4 fr">+20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
			</ul>
		</section>
		<section class="ticket-cont thism">
			<ul>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">采购消费</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">管理员名称</p>
						</div>
						<span class="ticket-cont-plus co1 fr">-20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">采购消费</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">管理员名称</p>
						</div>
						<span class="ticket-cont-plus co1 fr">-20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">采购消费</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">管理员名称</p>
						</div>
						<span class="ticket-cont-plus co1 fr">-20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
			</ul>
		</section>
		<section class="ticket-cont thism">
			<ul>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">申请提现</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">财务人员名称</p>
						</div>
						<span class="ticket-cont-plus co1 fr">-20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">提现成功</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">财务人员名称</p>
						</div>
						<span class="ticket-cont-plus co1 fr">-20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
				<li>
					<div class="ticket-cont-info co2 bb bt c">
						<span class="fl">订单编号:254345435</span>
						<span class="fr">提现失败</span>
					</div>
					<div class="ticket-cont-list c">
						<img src="images/head.jpg" width="67" height="67" class="fl" />
						<div class="fl">
							<p class="ticket-cont-name">财务人员名称</p>
						</div>
						<span class="ticket-cont-plus co4 fr">+20000</span>
					</div>
					<div class="ticket-cont-info co2 bt c">
						<span class="fl">湖南大学一分店</span>
						<span class="fr">2016-04-26 12:00</span>
					</div>
				</li>
			</ul>
		</section>
	</div>
	<div class="withdraw">
		<a href="javascript:popShow('.pop');">提现</a>
	</div>
	<section class="pop">
		<div class="pop-desc tc">确认将所有享券提现至您的微信钱包中？</div>
		<a href="javascript:popHide();" class="pop-dete">确定</a>
	</section>
</body>
<script src="js/zepto.min.js"></script>
<script>
	$('.ticket-nav li').on('touchstart',function(){
		$(this).addClass('co1').siblings().removeClass();
		$('.ticket-cont').hide().eq($(this).index()).show();
	})
	//弹窗
	function popShow(id) {
		var p = $(id);
		if (p) {
			p.show();
			p.css({
				position: 'fixed',
				top: '50%',
				left: '50%',
				marginTop: -p.height() / 2,
				marginLeft: -p.width() / 2,
				zIndex: 1000
			});
			p.attr('for', 'pop');
			$('body').append('<div for="overlay" style="width:100%;height:100%;position:fixed;top:0;left:0;z-index:999;background:rgba(0,0,0,0.6);"></div>');
		}
	}
	function popHide(){
		$('[for="pop"]').hide();
		$('[for="overlay"]').remove();
	}
</script>
</html>